<template>
  <div>
    <van-nav-bar
      :title="generalData.institutionName"
      left-arrow
      @click-left="backButtonEvent"
      v-if="!$isDD"
      class="pageContainer"
    />
    <div class="generalContainer">
      <!-- 头部 -->
      <div class="generalHeaderContainer" :style="{ top: !$isDD ? '46px' : '0px' }" @click="goDtail">
        <div class="generalHeader">
          <div class="dimension">
            <div class="dimensionName">总经理综合考核得分</div>
            <div class="dimensionIcon" @click.stop="vantPup">
              <span class="icon icon-cechoutishuoming" style="color: rgba(114, 118, 135, 1)"></span>
            </div>
          </div>
          <div class="assessment">
            <div class="assessmentResult">{{ generalData.examineScore }}</div>
            <div class="assessmentSort">
              <div class="sortDesc">全司排名</div>
              <div
                :class="[
                  { sort: true },
                  { rankFirst: generalData.rank === '1' },
                  { rankSecond: generalData.rank === '2' },
                  { rankThird: generalData.rank === '3' }
                ]"
              >
                {{ generalData.rank }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 雷达图 -->
      <div class="generalRadar">
        <general-radar :generalData="generalData"></general-radar>
      </div>
      <!-- 列表 -->
      <div class="generalList">
        <general-list :generalData="generalData" @sortTableList="sortTableList"></general-list>
      </div>
    </div>
    <van-popup v-model="showPop" position="bottom">
      <div class="testh">
        <div class="pophead">
          <span>指标使用说明</span>
          <span @click.stop="overlay" class="guanbi icon icon-guanbi"></span>
        </div>
        <div class="content-box">
          <img class="commentImg" alt="" src="@/assets/images/performanceComment.png" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import generalRadar from './generalRadar.vue'
import generalList from './generalList.vue'
export default {
  props: {
    generalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showPop: false
    }
  },
  components: {
    generalRadar,
    generalList
  },

  created() {
    if (this.$isDD) {
      this.$dd.ui.webViewBounce.disable()
      this.setTitle()
      this.$dd.ready(() => {
        if (this.$dd.android) {
          document.addEventListener('backbutton', this.backButtonEvent)
        } else {
          this.$dd.biz.navigation.setLeft({
            control: true,
            text: '',
            onSuccess: result => {
              this.$router.back()
            },
            onFail(err) {
              console.log('返回失败', err)
            }
          })
        }
      })
    }
    // 删除 sessionStorage 存储值
    window.sessionStorage.removeItem('PERFORMANCE_DIMENSION_ID')
  },
  destroyed() {
    if (this.$dd.android) {
      document.removeEventListener('backbutton', this.backButtonEvent)
    }
  },

  methods: {
    sortTableList(sort, sortField) {
      this.$emit('getSortTableList', sort, sortField)
    },
    /** 设置标题 */
    setTitle() {
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.navigation.setTitle({ title: this.generalData.institutionName })
        })
      }
    },
    backButtonEvent(ev) {
      if (ev) {
        ev.preventDefault() // 阻止返回
      }
      this.$router.back()
    },
    vantPup() {
      this.showPop = true
    },
    overlay() {
      this.showPop = false
    },
    goDtail() {
      this.$router.push(
        `/performanceDetails?dimensionId=${this.generalData.dimensionId}&institutionValue=${this.generalData.institutionValue}`
      )
    }
  },
  watch: {
    generalData: {
      deep: true,
      //   immediate: true,
      handler(newVal) {
        this.setTitle()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pageContainer {
  padding-top: 46px;
}
/deep/.van-popup{
  border-radius: 20px 20px 0px 0px;
  background-color: #292e3a;
}
/deep/.van-popup{
  background-color: 'none';
}
.generalContainer {
  width: 335px;
  margin: 16px auto 4px auto;
  .generalHeaderContainer {
     height: 94px;
    position: fixed;
    z-index: 999;
    background: #393f52;
    border-radius: 8px 8px 0px 0px;
    .generalHeader {
      width: 335px;
      border-radius: 8px 8px 0 0;
      padding: 16px 20px 0 20px;
      background: #393f52;

      .dimension {
        display: flex;
        align-items: center;
        padding-bottom: 8px;

        .dimensionName {
          line-height: 25px;
          font-size: 18px;
          font-weight: 400;
          color: #e9e9ed;
          padding-right: 9px;
        }
      }

      .assessment {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .assessmentResult {
          line-height: 37px;
          font-size: 32px;
          font-weight: bold;
          color: #fff;
        }

        .assessmentSort {
          display: flex;

          .sortDesc {
            line-height: 20px;
            font-weight: 400;
            color: #d3d4da;
            font-size: 14px;
          }

          .sort {
            width: 28px;
            height: 20px;
            margin: 0 8px;
            font-size: 14px;
            background: linear-gradient(135deg, rgba(134, 142, 167, 0.14) 0%, rgba(98, 107, 135, 0.14) 100%);
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
          }

          .rankFirst {
            background: linear-gradient(135deg, rgba(255, 215, 131, 0.91) 0%, rgba(255, 185, 75, 0.43) 100%);
          }
          .rankSecond {
            background: linear-gradient(135deg, rgba(255, 144, 69, 0.84) 0%, rgba(255, 97, 50, 0.6) 100%);
          }
          .rankThird {
            background: linear-gradient(135deg, rgba(145, 182, 255, 0.51) 0%, rgba(121, 117, 255, 0.42) 100%);
          }
        }
      }
    }
  }
  .generalRadar {
    margin-top: 94px;
    background: #323747;
  }
  .generalList {
    margin-top: 0.4px;
    background: #323747;
  }
}
.testh {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #292e3a;
  .pophead {
    padding: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    position: relative;
    .guanbi {
      position: absolute;
      top: 10px;
      right: 20px;
      box-sizing: border-box;
      font-size: 20px;
      padding: 0 0 0 10px;
    }
  }
  .content-box {
    padding-bottom: 10px;
    overflow: auto;
    .commentImg {
      width: 100%;
    }
  }
}
</style>
